// import React,{Component} from 'react'
// import React,{useState} from 'react'
// export default function Hellos({aa}) {
//     return (
//         <div>
//             {aa}
//         </div>
//     )
// }
// export default class Hellow extends Component{
//     static defaultProps = {
//         heights:'1.7'
//     }
//     render (){
//         console.log('this',this.props.aa);
//         const {aa,heights} =this.props
//         return <div>
//             {aa}
//             我是内部传过来的值：{heights}
//         </div>
//     }
// }
// export default class Hellow extends Component{
//     //第一种方法
//     // state={
//     //     text:"我是状态数据u"
//     // }
//     //第二中方法
//     constructor(props){
//         super(props)  //super用来继承的，相当于this.props = props
//         this.state={
//             text:"我是状态数据第二种方法"
//         }
//     }
//     render (){
//         const {text} = this.state
//         return <div>
//             {text}
//         </div>
//     }
// }
//函数组件状态
// export default function Hello(){
//     //格式const/let [变量名] = useState(初始值)
//     const [count] = useState(0)
//     const [bol] = useState(true)
//     return(
//         <div>
//             {count}
//             {bol?"正":"反"}
//         </div>
//     )
// }
//类组件的事件
// import React, { Component } from 'react'

// export default class Hellos extends Component {
//     constructor(props){
//         super(props)
//         //改变this指向的另一种写法
//         this.handler = this.handler.bind(this)
//         this.state={
//             text:"我是数据"
//         }
//     }
//     //事件定义程序形式1
//     handler (){
//         alert("我是类组件的事件")
//     }
//     //箭头函数就不需要改this指向了
//     // handler = ()=>{
//     //     alert("我是类组件的事件",this)
//     // }
    
//     render() {
//         return (
//             <div>
//                 <button onClick={this.handler}>普通事件</button>
//                 <button onClick={this.handler.bind(this)}>普通事件--bind绑定this</button>
//             </div>
//         )
//     }
// }
// 函数组件事件
// import React from 'react'

// export default function Hellos() {
//     function fn(){
//         alert("函数1")
//     }
//     function fun1(n){
//         alert(n)
//     }
//     return (
//         <div>
//             <button onClick={fn}>事件</button>
//             <button onClick={()=>{fun1("我是传过来的参数")}}>点我传参</button>
//         </div>
//     )
// }
//类组件里修改状态
// import React, { Component } from 'react'
// export default class Hellos extends Component {
//     state={
//         num:"0",
//         age:"爱你哦"
//     }
//     increment=()=>{
//         //写法一   ----同步
// //         this.setState({
// //             num:++this.state.num
// //         })
//         //写法二    ---异步
//         this.setState(({num})=>{
//             // console.log(preCount);
//             // document.title = num
//             return {
//                 num:++num          
//             }        
//         },()=>{
//             document.title = this.state.num
//         })
//     }
//     render() {
//         const {num,age} = this.state
//         return (
//             <div>
//                 <button onClick={this.increment}>+</button>
//                 <p>{num}</p> 
//                 <p>{age}</p>
//             </div>
//         )
//     }
// }
// import React ,{useState}from 'react'

// export default function Hellos() {
//     const [num,setCount] = useState(0)
//     function iec(){
//         setCount(prc=>prc+1)
//     }
//     return (
//         <div>
//             <button onClick={iec}>++++</button>
//             <p>{num}</p>
//         </div>
//     )
// }
// import React, { Component } from 'react'

// export default class Hellos extends Component {
//     state ={
//         money:2000,
//         xml:`<h2>我是哈哈</h2>`,
//         flag:true,
//         flag1:false
//     }
//     changeflage=()=>{
//         this.setState({
//             flag:!this.state.flag
//         })
//     }
//     render() {
//         const {money,xml,flag,flag1} = this.state
//         if(flag1){
//             return (<div>加载中 ......</div>)
//         }else{
//             return (
//                 <div>
//                     <p>{money}</p>
//                     <div dangerouslySetInnerHTML={{__html:xml}}></div>
//                     <button onClick={this.changeflage}>点击取反</button>
//                     {/* 三目运算 */}
//                     <p>{flag?"真":"假"}</p>
//                     <p>{flag?<h1>真</h1>:"假"}</p>
//                      短路原则 <br/>
//                     <p>{flag&&'真'||'假'}</p>
//                 </div>
//             )
//         }
        
//     }
// }
//列表渲染
import React, { Component } from 'react'

export default class Hellos extends Component {
    state={
        arr:[
            {
                id:1,
                text:"任务一"
            },
            {
                id:2,
                text:"任务二"
            },
            {
                id:3,
                text:"任务三"
            }
        ]
    }
    render() {
        const {arr} = this.state
        return (
            <div>
                <ul>
                    {arr.map(item=>{return <li key={item.id}>{item.text}</li>})}
                </ul>
            </div>
        )
    }
}
